<template>
    <el-dialog
        title="编辑商品管理"
        :visible.sync="isShow"
        center
        :show-close="false"
    >
        <el-form
            :model="memberform"
            :rules="rules"
            label-position="right"
            label-width="100px"
            ref="memberform"
        >
            <el-form-item label="昵称" prop="nickname">
                <el-input v-model="memberform.nickname"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="memberform.phone"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input
                    v-model="memberform.password"
                    show-password
                ></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-switch
                    v-model="memberform.status"
                    :active-value="1"
                    :inactive-value="2"
                    active-color="#13ce66"
                ></el-switch>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="edit">修 改</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { memberedit } from "../../utils/request/api.js";
export default {
    props: ["isDialog", "row"],
    data() {
        return {
            rules: {
                nickname: {
                    required: true,
                    message: "请输入昵称",
                    trigger: "blur",
                },
                phone: [
                    {
                        required: true,
                        message: "手机号不能为空",
                        trigger: "blur",
                    },
                    {
                        min: 11,
                        max: 11,
                        message: "请输入 11 个字符",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    computed: {
        isShow: {
            get() {
                return this.isDialog;
            },
            set() {
                this.$emit("changeBtn", false);
            },
        },
        //拿到数据
        memberform() {
            return this.row;
        },
    },
    methods: {
        cancel() {
            this.$emit("changeBtn", false);
        },
        //提交的
        edit() {
            this.$refs.memberform.validate(async (val)=>{
                if(val){
                    // if(!this.memberform.password.trim()){
                    //     console.log('nopassword');
                    //     delete this.memberform.password
                    // }
                    this.memberform.password.trim()
                    let res = await memberedit(this.memberform);
                    if (res.code == 200) {
                        this.$message.success("修改成功");
                        this.cancel();
                        //去父组件调用update，使用另一个组件的方法
                        this.$emit('update')
                    } else {
                        this.$message.error(res.msg);
                    }
                }else {
                    console.log('error submit!!');
                    return false;
                }
            })
        },
    },
    mounted() {},
};
</script>

<style scoped></style>
